<template>
    <div>
        <div class="meg load-fade">
        </div>

        <div class="meg2">
            <vue-danmaku v-model="message" :speeds="config.speeds" :randomChannel="config.randomChannel"
                :isSuspend="config.isSuspend" :loop="config.loop" :useSlot="config.useSlot" :channels="config.channels"
                :top="config.top" :right="config.right" ref="Danmaku"
                style="height:85vh; width:100%;position: relative;top: 5rem;right: 0;z-index: -1;">

                <template slot="dm" slot-scope="{ index, danmu  }">
                    <section class="content" @click="action(danmu, index)">
                        <div class="avarts">
                            <img :src="danmu.avatar == undefined ? 'https://picsum.photos/100/100' : danmu.avatar"
                                style="height: 30px;" />
                        </div>
                        <!-- 如果是自己的弹幕,就标红加粗字体 -->
                        <div class="text" :style="danmu.flag == 'my' ? 'font-weight: bold;color:red' : ''">
                            <span v-text="danmu.content"></span>
                        </div>
                    </section>
                </template>
            </vue-danmaku>
                <div style="display: flex;justify-content: center;position: relative;margin: 0;padding: 0;height: 15vh;">
                    <div class="msgform">
                        <input type="text" placeholder="留下点什么吧..." v-model="msg" id="msg">
                        <input type="submit" value="发送" id="send" @click="sendMessage()">
                    </div>
                </div>
            <messageComment />
            <czh-footer />
        </div>
    </div>
</template>
<script>
import vueDanmaku from 'vue-danmaku'
import { getMessages, sendMessage } from '@/api/message.js'
import messageComment from '@/components/messageComment.vue'
import footer from '@/components/footer.vue'
export default {
    components: {
        vueDanmaku,
        messageComment,
        'czh-footer':footer
    },
    data() {
        return {
            message: [],
            tosend: false,
            msg: '',

            // 弹幕配置
            config: {
                speeds: 150,//弹幕速度
                randomChannel: true,//随机选择轨道插入
                isSuspend: true,//是否开启弹幕悬停(PC是鼠标悬停，移动端是点击悬停)
                loop: true,//是否开启循环播放
                useSlot: true,//是否开启弹幕插槽(自定义样式时开启)
                channels: 8,//轨道数量
                top: 25,//弹幕垂直间距(px)
                right: 25,//弹幕水平间距(px)
                autoplay: true
            },
        }
    },
    methods: {
        sendMessage() {
            let text = this.msg
            if (text == '') {
                this.$message({
                    message: "请输入内容!",
                    type: "warning"
                })
                return
            }
            sendMessage(text).then(res => {
                if (res == undefined) {
                    this.tosend = true
                    this.msg = ''
                    this.$message({
                        message: "发送成功!",
                        type: "success"
                    },
                        this.$refs.Danmaku.insert({
                            url: '',
                            content: text,
                            flag: 'my'
                        })
                    )
                }
            })
        },
    },
    created() {
        if (window.innerWidth < 768) {
            this.config.speeds = 100,
                this.config.channels = 10
        }
        getMessages().then(res => {
            this.message = res
        })
    }
}
</script>
<style scoped>
.meg {
    width: 100%;
    height: 100vh;
    background-image: url('https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302');
    background-size: cover;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -1;
}

.meg2 {
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
}

.msgform {
    width: 20rem;
}

input[type="text"] {
    width: 70%;
    height: 2.5rem;
    border: 1px solid #ffffff;
    color: #898989;
    border-radius: 25px;
    font-size: 14px;
    background-color: transparent;
    margin-right: 5%;
}

input[type="submit"] {
    width: 20%;
    height: 2.5rem;
    border: 1px solid #ffffff;
    color: #ffffff;
    border-radius: 25px;
    font-size: 1rem;
    background-color: transparent;
}


.content {
    background: rgba(255, 255, 255, .2);
    padding: 6px 5px 1px 5px;
    border-radius: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: left;
}

.avarts {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgb(157, 219, 207);
    overflow: hidden;
    position: relative;
    bottom: 2px;
}

.text {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    margin-left: 2px;
    font-family: 'commentFont';
}
</style>